<template>
  <transition name="slide-fade">
    <div
      v-show="visible"
      style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;"
    >
      <el-row>
        <el-col :span="6">
          用户ID:
          <el-input
            v-model="searchValue.appUserId"
            size="mini"
            style="width: 150px"
            prefix-icon="el-icon-edit"
            placeholder="用户ID"
          />
        </el-col>
        <el-col :span="6">
          游戏ID:
          <el-input
            v-model="searchValue.id"
            size="mini"
            style="width: 150px"
            prefix-icon="el-icon-edit"
            placeholder="游戏ID"
          />
        </el-col>
        <el-col :span="12">
          最后登录时间:
          <el-date-picker
            v-model="searchValue.DateScope"
            type="daterange"
            size="mini"
            unlink-panels
            value-format="timestamp"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          证件号码:
          <el-input
            v-model="searchValue.idNo"
            size="mini"
            style="width: 180px"
            prefix-icon="el-icon-edit"
            placeholder="请输入身份证号码"
          />
        </el-col>
        <el-col :span="6">
          姓名:
          <el-input
            v-model="searchValue.userName"
            size="mini"
            style="width: 150px"
            prefix-icon="el-icon-edit"
            placeholder="请输入用户姓名"
          />
        </el-col>
        <el-col :span="6">
          昵称:
          <el-input
            v-model="searchValue.nickname"
            size="mini"
            style="width: 150px"
            prefix-icon="el-icon-edit"
            placeholder="请输入昵称"
          />
        </el-col>
        <el-col
          :span="5"
          :offset="1"
        >
          <el-button
            size="mini"
            @click="$emit('update:visible',false)"
          >
            取消
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            @click="$emit('search',['advanced',searchValue])"
          >
            搜索
          </el-button>
        </el-col>
      </el-row>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "AdvanceSearch",
        props:{
            visible:{
                type:Boolean,
                default:false
            },
        },
        data(){
            return {
                searchValue: {
                    appUserId: null,
                    id: null,
                    userName: null,
                    nickname: null,
                    idNo: null,
                    DateScope: null
                },
            }
        },
        methods: {

        }
    }
</script>

<style scoped>
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>